<template>
	<view class="feedback-container">
		<u-navbar title="反馈与建议" @rightClick="rightClick" :autoBack="true" :placeholder="true"></u-navbar>
		<!-- 反馈内容区域 -->
		<view class="content">
			<!-- 反馈类型选择 -->
			<view class="title">反馈类型</view>
			<view v-for="(item, index) in labelList" :key="index" class="label" :class="{ selected: item.selected }"
				@click="selectLabel(index)">
				{{ item.name }}
			</view>

			<!-- 问题描述 -->
			<view class="title">问题描述</view>
			<view class="input-container">
				<textarea class="input-box" placeholder="请描述您的问题，以便我们尽快为您处理(必填)" v-model="description" maxlength="200"
					@input="handleInput"></textarea>
				<view class="limit-text">{{ inputLength }}/200</view>
			</view>

			<!-- 图片上传 -->
			<view class="tupian">图片</view>
			<view class="image-box" @click="addImage">
				+
			</view>
			<view class="selected-images">
				<view v-for="(item, index) in selectedImages" :key="index" class="selected-image">
					<image class="image" :src="item" mode="aspectFill" />
				</view>
			</view>

			<!-- 手机号码 -->
			<view class="phone-container">
				<view class="phone-label">手机号码</view>
				<input type="number" v-model="phone" placeholder="请输入手机号码" class="phone-input" />
			</view>

			<!-- 联系授权 -->
			<view class="checkbox-container">
				<checkbox value="cb" :checked="allowContact" @change="toggleContact" />
				<text>允许盛心理通过电话联系我</text>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn">
			<button @click="submit">提交反馈</button>
		</view>

		<!-- 服务热线 -->
		<view class="service-line">
			<image src="/static/dianhua.png" class="service-icon" />
			<text>服务热线：400-650-6605</text>
		</view>

		<!-- 成功弹窗 -->
		<view v-if="showDialog" class="dialog-mask">
			<view class="dialog-content">
				<view class="dialog-title">反馈成功</view>
				<view class="dialog-text">非常感谢您的反馈，我们将尽快为您处理</view>
				<view class="dialog-actions">
					<button @click="navigateBack">返回主页</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelList: [{
						name: "功能异常",
						selected: false
					},
					{
						name: "产品改进",
						selected: true
					},
					{
						name: "通话反馈",
						selected: false
					},
					{
						name: "其他",
						selected: false
					}
				],
				inputLength: 0,
				selectedImages: [],
				description: '',
				phone: '',
				allowContact: true,
				showDialog: false
			}
		},
		methods: {
			// 选择反馈类型
			selectLabel(index) {
				this.labelList = this.labelList.map((item, i) => ({
					...item,
					selected: i === index ? !item.selected : false
				}))
			},

			// 输入框监听
			handleInput(e) {
				this.inputLength = e.detail.value.length
			},

			// 图片上传
			addImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.selectedImages = [...this.selectedImages, ...res.tempFilePaths]
					}
				})
			},

			// 联系授权切换
			toggleContact(e) {
				this.allowContact = e.detail.value
			},

			// 提交表单
			submit() {
				// 这里添加实际提交逻辑
				uni.showLoading({
					title: '提交中...'
				})
				setTimeout(() => {
					uni.hideLoading()
					this.showDialog = true
				}, 1000)
			},

			// 返回主页
			navigateBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.feedback-container {
		padding: 40rpx;
		background: #f8fafc;
		min-height: calc(100vh - 44px);
	}

	.title {
		margin: 20rpx 0;
		padding: 0 20rpx;
		border-left: 6rpx solid;
		border-image: linear-gradient(to bottom, #678fcd, #b3d2fa) 1 100%;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.label {
		display: inline-flex;
		padding: 10rpx 25rpx;
		margin: 10rpx;
		background: rgba(196, 227, 239, 0.3);
		border-radius: 50rpx;
		font-size: 25rpx;
		color: #4e6974;
		transition: all 0.3s;
	}

	.selected {
		background: #c4e3ef;
		color: #4e6974;
		box-shadow: 0 2rpx 6rpx rgba(103, 143, 205, 0.2);
	}

	.input-container {
		position: relative;
		width: 100%;
		height: 228rpx;
		border-radius: 12rpx;
		border: 2rpx solid rgba(196, 227, 239, 0.4);
		margin: 20rpx 0;
	}

	.input-box {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.limit-text {
		position: absolute;
		right: 20rpx;
		bottom: 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.image-box {
		width: 104rpx;
		height: 104rpx;
		border: 2rpx dashed rgba(196, 227, 239, 0.4);
		border-radius: 16rpx;
		text-align: center;
		line-height: 104rpx;
		font-size: 60rpx;
		color: #e6f0f4;
		margin: 10rpx 0;
	}

	.selected-images {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.selected-image {
		width: 104rpx;
		height: 104rpx;
		position: relative;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.image {
		width: 100%;
		height: 100%;
	}

	.phone-container {
		display: flex;
		align-items: center;
		margin: 30rpx 0;
	}

	.phone-label {
		width: 160rpx;
		font-size: 28rpx;
		color: #333;
	}

	.phone-input {
		flex: 1;
		height: 72rpx;
		padding: 0 20rpx;
		border: 2rpx solid rgba(196, 227, 239, 0.4);
		border-radius: 12rpx;
		font-size: 28rpx;
	}

	.checkbox-container {
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 24rpx;
		color: #666;
		margin: 20rpx 0;
	}

	.submit-btn button {
		width: 650rpx;
		height: 90rpx;
		background: #678fcd;
		color: white;
		border-radius: 50rpx;
		font-size: 32rpx;
		margin: 40rpx 0;
	}

	.service-line {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		color: #666;
		font-size: 24rpx;
		margin-top: 80rpx;
	}

	.service-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 弹窗样式 */
	.dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dialog-content {
		width: 540rpx;
		background: white;
		border-radius: 18rpx;
		padding: 40rpx;
		text-align: center;
	}

	.dialog-title {
		font-size: 36rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.dialog-text {
		font-size: 28rpx;
		color: #666;
		margin: 20rpx 0;
	}

	.dialog-actions button {
		width: 200rpx;
		height: 70rpx;
		background: #678fcd;
		color: white;
		border-radius: 50rpx;
		margin-top: 30rpx;
	}
</style>